import React, { ReactElement } from 'react';
import { Clipboard, View } from 'react-native';
import JSBI from 'jsbi';

import Button from '../../../../components/Button';
import DashLine from '../../../../components/DashLine';
import CustomText from '../../../../components/Text';
import { toolTipOpen } from '../../../../util/global';
import OrderContent from '../OrderContent';
import OrderItem from '../OrderItem';
import { Data as CourseOrderInfo } from '../../../../api/order/getCourseOrderDetail';

import styles from './style';
import { ORDER_STATUS_DESC } from '../../../OrderList/constant';
import { PACKAGE_STATUS_DESC, PAY_METHOD_DESC } from '../../constant';
import { transformShowPrice } from '../../../../util/transformMoney';
import { dateToZhDate } from '../../../../util/transformDate';

interface CourseOrderProps extends CourseOrderInfo {
  orderId: string;
}

export default (props: CourseOrderProps): ReactElement => {
  const {
    orderId,
    orderStatus,
    courses,
    packages,
    orderAmount,
    payAmount,
    payMethod,
    createTime
  } = props;

  return (
    <View>
      <OrderItem title="订单信息">
        <View style={styles.list}>
          <OrderContent
            name="订单号："
            detail={JSBI.BigInt(orderId).toString()}
          />
          <OrderContent
            name="订单状态："
            detail={ORDER_STATUS_DESC[orderStatus]}
          />
          <Button
            hitSlop={{ left: 20, top: 20, right: 20, bottom: 20 }}
            text="复制"
            style={styles.copyContent}
            textStyle={styles.copy}
            onPress={(): void => {
              Clipboard.setString(JSBI.BigInt(orderId).toString());
              toolTipOpen({ desc: '复制成功' });
            }}
          />
        </View>
      </OrderItem>
      <OrderItem title="课程信息">
        {courses.map(
          (course, index): ReactElement => (
            <View style={styles.courseContent}>
              <CustomText style={styles.courseName}>
                {course.courseName}
              </CustomText>
              <CustomText style={styles.courseStartTime}>
                开课时间：{dateToZhDate(course.startTime.split(' ')[0])}
                {`${'    '}`}时长：{course.duration}讲
              </CustomText>
              {index !== 0 && (
                <DashLine
                  style={styles.dash}
                  length={30}
                  dashStyle={styles.dashItem}
                />
              )}
            </View>
          )
        )}
      </OrderItem>
      {packages.map(
        (item, index): ReactElement => (
          <OrderItem title={`包裹${index + 1}`}>
            <CustomText style={styles.packageName}>
              {item.packageName}
            </CustomText>
            <CustomText style={styles.packageDate}>
              更新时间：{item.updateTime}
            </CustomText>
            {/* <Button
              hitSlop={{ left: 20, top: 20, right: 20, bottom: 20 }}
              text="查看物流"
              activity
              textStyle={styles.packageInfo}
              onPress={(): void => {}}
            /> */}
            <Button
              hitSlop={{ left: 20, top: 20, right: 20, bottom: 20 }}
              text="暂无物流信息"
              activity={false}
              textStyle={[styles.packageInfo, styles.noPackageInfo]}
              onPress={(): void => {}}
            />
            <CustomText style={styles.packageStatus}>
              {PACKAGE_STATUS_DESC[item.status]}
            </CustomText>
          </OrderItem>
        )
      )}
      <OrderItem title="订单信息">
        <View style={styles.list}>
          <OrderContent
            name="订单金额："
            detail={`¥${transformShowPrice(orderAmount)}`}
          />
          <OrderContent
            name="实际支付："
            detail={`¥${transformShowPrice(payAmount)}`}
          />
          <OrderContent name="支付方式：" detail={PAY_METHOD_DESC[payMethod]} />
          <OrderContent name="下单时间：" detail={createTime} />
        </View>
      </OrderItem>
    </View>
  );
};
